<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/viewer.min.css" />

		<style type="text/css">
			[v-cloak] {
				display: none;
			}
			
			.mui-bar-nav {
				background: #27CDDB;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF;
			}
			
			#confirm {
				border: 1px solid #25CDDA;
				width: 300px;
				background-color: #25CDDA;
			}
			
			.row {
				background-color: #FFFFFF;
				margin: 10px 0px;
			}
			
			.row div {
				margin: 5px 0px;
				height: 20px;
				padding: 0px 15px;
			}
			
			.row div.bb {
				border-bottom: solid 1px gainsboro;
			}
			
			.row div span.title {
				font-size: 14px;
				color: #4e4a4a;
			}
			
			.row div span.head {
				font-size: 14px;
				width: 25px;
				color: white;
				background-color: #27CDDB;
			}
			
			.row div span.val {
				float: right;
				color: gray;
				font-size: 14px;
			}
			
			.mui-btn {
				outline: none;
			}
			
			.mui-btn-primary:active {
				border: 1px solid #58dde8!important;
				background-color: #58dde8!important;
			}
			
			.mui-btn-danger:active {
				border: 1px solid #da7f7c!important;
				background-color: #da7f7c!important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">交易详情</h1>
		</header>
		<div class="mui-content" id="aicVue" v-cloak>
			<div class="mui-row row" style="margin-top: 0px;">
				<div class="mui-col-xs-12 bb">
					<span class="head">&nbsp;{{showBuyer ? '卖出':'买入'}}&nbsp;</span>
					<span class="val"><b style="color: #27CDDB;">{{mstatus}}</b></span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">订单号</span>
					<span class="val">{{order.orderNo}}</span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">总金额</span>
					<span class="val"><b style="font-size: 18px;color: #000000;">￥{{order.coinTotalPrice}}</b></span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">价格</span>
					<span class="val">￥{{order.coinPrice}}</span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">数量</span>
					<span class="val">{{order.coinQuantity}} AIC</span>
				</div>
				<div class="mui-col-xs-12" v-if="showBuyer">
					<span class="title">手续费</span>
					<span class="val">{{order.transFee}} AIC</span>
				</div>
				<div class="mui-col-xs-12" v-if="showBuyer">
					<span class="title">支出币数</span>
					<span class="val"><b style="font-size: 18px;color: #000000;">{{order.coinQuantity + order.transFee}} AIC</b></span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">下单时间</span>
					<span class="val">{{order.createTime}}</span>
				</div>
				<div class="mui-col-xs-12" v-if="showPaymentTime">
					<span class="title">付款时间</span>
					<span class="val">{{order.paymentTime}}</span>
				</div>
				<div class="mui-col-xs-12" v-if="showFinishTime">
					<span class="title">{{order.status == 3 ? '取消时间' : '完成时间'}}</span>
					<span class="val">{{order.finishTime}}</span>
				</div>
			</div>
			<div class="mui-row row" v-if="showBuyer">
				<p style="padding: 0px 15px;height: 9px;float: right;color: red;font-size: 10px;" v-if="order.status == 1">
					<span style="font-size: 12px;" class="mui-icon mui-icon-info"></span>请务必确认付款人与买家姓名是否一致
				</p>
				<div class="mui-col-xs-12">
					<span class="title">买家姓名</span>
					<span class="val"><b style="font-size: 18px;color: #000000;">{{order.buyerRealname}}</b></span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">买家手机</span>
					<span class="val" onclick="copyText(this.innerText)">{{order.buyerMobile}}</span>
				</div>
			</div>

			<div class="mui-row row" v-if="showSeller">
				<p style="padding: 0px 15px;height: 9px;float: right;color: red;font-size: 10px;" v-if="order.status == 0">
					<span style="font-size: 12px;" class="mui-icon mui-icon-info"></span>付款前请务必确认收款人与卖家姓名是否一致
				</p>
				<div class="mui-col-xs-12">
					<span class="title">卖家姓名</span>
					<span class="val"><b style="font-size: 18px;color: #000000;">{{order.sellerRealname}}</b></span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">卖家手机</span>
					<span class="val" onclick="copyText(this.innerText)">{{order.sellerMobile}}</span>
				</div>
				<div class="mui-col-xs-12" v-if="showAlipay">
					<span class="title">支付宝</span>
					<span class="val" onclick="copyText(this.innerText)">{{order.sellerAlipay}}</span>
				</div>
				<div class="mui-col-xs-12" v-if="showWechat">
					<span class="title">微信</span>
					<span class="val" onclick="copyText(this.innerText)">{{order.sellerWechat}}</span>
				</div>
				<div class="mui-col-xs-12" v-if="showBank">
					<span class="title">银行卡号</span>
					<span class="val" onclick="copyText(this.innerText)">{{order.sellerBankCardNumber}}</span>
				</div>
				<div class="mui-col-xs-12" v-if="showBank">
					<span class="title">银行</span>
					<span class="val">{{order.sellerBankName}}</span>
				</div>
				<div class="mui-col-xs-12" v-if="showBank && order.sellerBankNameBranch != null">
					<span class="title">支行</span>
					<span class="val">{{order.sellerBankNameBranch}}</span>
				</div>
			</div>
			<div class="mui-row row" v-if="showSeller && order.status == 0 ">
				<div class="mui-col-xs-12" v-if="order.status == 0" style="height: 30px;">
					<span class="title" style="color: green; line-height: 30px; vertical-align: middle;" onclick="galleryImg()">点击上传付款凭证</span>
					<span class="val" v-if="order.transProofImg != null"><img onclick="showImg(this)" :src="order.transProofImg" width="40px" height="30px"/></span>
				</div>
			</div>
			<div class="mui-row row" v-if="(showBuyer || order.status != 0) && order.transProofImg != null">
				<div class="mui-col-xs-12" style="height: 60px;">
					<span class="title" style="color: green; line-height: 60px; vertical-align: middle;">买家付款凭证</span>
					<span class="val"><img onclick="showImg(this)" :src="order.transProofImg" width="80px" height="60px" /></span>
				</div>
			</div>

			<div class="mui-button-row" style="margin-bottom: 20px;margin-top: 10px;">
				<button id="confirm" type="button" class="mui-btn mui-btn-primary" v-if="showConfirm" @click="commit" style="width: 120px;">{{transStateStr}}</button>&nbsp;&nbsp;
				<button type="button" class="mui-btn mui-btn-danger" v-if="showConfirm && showSeller" @click="cancel" style="width: 120px;">取消交易</button>
			</div>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/validator.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript" src="../js/viewer.min.js"></script>
		<script type="text/javascript ">
			mui.init()
			var id = "";
			var config = "";
			var transState = ""; //1为买家待付款，2为买家已付款，3为卖家等待付款，4为卖家确认买家付款。8交易完成

			var vm = new Vue({
				el: '#aicVue',
				data: {
					order: {},
					password: "",
					transStateStr: "",
					mstatus: "",
					showBuyer: true,
					showSeller: true,
					showPaymentTime: false,
					showFinishTime: false,
					showAlipay: false,
					showWechat: false,
					showBank: false,
					showConfirm: false
				},
				mounted: function() {
					mui.plusReady(function() {
						swipeBack();
						member = JSON.parse(plus.storage.getItem("member"));
						//给detailPage赋值,根据ID获取详情页面
						id = plus.webview.currentWebview().mid;
						transState = plus.webview.currentWebview().mtranstate;
						vm.mstatus = plus.webview.currentWebview().mstatus;
						config = plus.storage.getItem("config");
						vm.getOrderDetail();
					});
				},
				methods: {
					getOrderDetail: function() {
						var mdata = {
							"id": id
						};
						mui.postParam(GetTransingOrderDetail, mdata, function(result) {
							mConsole.log("订单详情：" + JSON.stringify(result));
							if(result.code == 0) {
								vm.order = result.ctocTransaction;
								switch(transState) {
									case 1:
										vm.transStateStr = "确认付款";
										break;
									case 2:
										vm.transStateStr = "等待卖家确认";
										break;
									case 3:
										vm.transStateStr = "等待买家付款";
										break;
									case 4:
										vm.transStateStr = "确认收款";
										break;
									case 8:
										vm.transStateStr = "交易完成";
										break;
								}
								vm.showBuyer = vm.order.buyerMemberId != member.id;
								vm.showSeller = vm.order.sellerMemberId != member.id;
								vm.showPaymentTime = vm.order.paymentTime ? true : false;
								vm.showFinishTime = vm.order.finishTime ? true : false;
								vm.showAlipay = vm.order.sellerAlipay ? true : false;
								vm.showWechat = vm.order.sellerWechat ? true : false;
								vm.showBank = vm.order.sellerBankCardNumber ? true : false;
								if(vm.order.status == 0) {
									vm.showConfirm = vm.showSeller;
								} else if(vm.order.status == 1) {
									vm.showConfirm = vm.showBuyer;
								} else {
									vm.showConfirm = false;
								}
								return;
							}

							mymui(result.msg);
						});
					},
					commit: function() {
						var url = "";
						if(vm.showBuyer) {
							url = SellerConfirm;
						} else {
							url = BuyerPay;
						}
						mui.confirm(vm.showBuyer ? '确认收款?' : '确认付款?', '交易确认', ['取消', '确认'], function(e) {
							if(e.index == 1) {
								mui.postParam(url, {
									transId: id
								}, function(result) {
									if(result.code == 0) {
										vm.showConfirm = false;
										mui.fire(plus.webview.getWebviewById('tabmy.html'), 'reLoadData');
										var transaction = plus.webview.getWebviewById('my-transation');
										if(transaction) {
											mui.fire(transaction, 'confirm', {id: id});
										} else {
											mui.fire(plus.webview.getWebviewById('tabjiaoyi.html'), 'confirm', {id: id});
										}
										mymui("确认成功");
									} else {
										mymui(result.msg);
									}
								});
							}
						});
					},
					cancel: function() {
						mui.confirm('确认取消交易?', '取消交易', ['取消', '确认'], function(e) {
							if(e.index == 1) {
								mui.postParam(CancelTrans, {
									transId: id
								}, function(result) {
									if(result.code == 0) {
										vm.showConfirm = false;
										mymui("取消成功");
									} else {
										mymui(result.msg);
									}
								});
							}
						});
					}
				}
			});

			function galleryImg() {
				plus.gallery.pick(function(a) {
						vm.order.transProofImg = a;
						upload({
							name: "file",
							path: a
						});
					},
					function(a) {}, {
						filter: "image"
					})
			};

			// 上传文件  
			function upload(file) {
				var wt = plus.nativeUI.showWaiting("上传中，请稍后...");
				var task = plus.uploader.createUpload(UploadTransProof, {
					method: "POST"
				}, function(t, status) {
					if(status == 200) {
						var result = t.responseText;
						var parseResult = JSON.parse(result);
						//上传完成        
						if(parseResult.code == 0) {
							mymui("上传成功");
						} else {
							mymui(parseResult.msg);
						}
					}
					wt.close();
				});
				task.setRequestHeader("token", plus.storage.getItem("tooken"));
				task.setRequestHeader("transId", id.toString());
				task.setRequestHeader("charset", "utf-8");
				task.addFile(file.path, {
					key: file.name
				});
				task.start();
			}

			function showImg(obj) {
				try {
					new Viewer(obj, {
						toolbar: false,
						navbar: false,
						title: false
					}).show();
				} catch(e) {}
			}

			//复制链接到剪切板
			function copyText(text) {
				mui.plusReady(function() {
					if(mui.os.android) {
						var Context = plus.android.importClass("android.content.Context");
						var main = plus.android.runtimeMainActivity();
						var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
						plus.android.invoke(clip, "setText", text);
						mymui("已复制");
					} else if(mui.os.ios) {
						var UIPasteboard = plus.ios.importClass("UIPasteboard");
						var generalPasteboard = UIPasteboard.generalPasteboard();
						generalPasteboard.setValueforPasteboardType(text, "public.utf8-plain-text");
						mymui("已复制");
					}
				});
			}
		</script>
	</body>

</html>